<style>
  .el-carousel{
    width: 100%;
    height: 100%;
  }
</style>
<template>
    <div class="questionContent">
      <header>
        <span>所有问题 /</span>
        <span class="back" v-if="detail != ''"> 关于{{detail.data.product}}的产品质量问题</span>
      </header>
      <div class="qc_content" v-if="detail != ''">
        <div class="top">
          <div class="top_title" @click="goBack"><i class="el-icon-arrow-left"></i>返回</div>
          <div class="top_name">
            <div class="tn_left">
              <span class="name" v-if="detail.data.title != undefined && detail.data.title != null && detail.data.title != ''">{{detail.data.title}}</span>
              <span class="name" v-else>{{detail.data.product}} {{detail.data.category}}</span>
              <span class="update" @click="updateName">点击修改</span>
            </div>
            <div class="tn_right">
              <span class="status" v-if="detail.data.status == 'open'">解决中</span>
              <span class="status" v-if="detail.data.status == 'dstop'">暂停</span>
              <span class="status" v-if="detail.data.status == 'close'">已解决</span>
              <div class="tnr_button but1" v-if="detail.data.status == 'open'" @click="upstateStatus('dstop')">暂停</div>
              <div class="tnr_button but2" v-if="detail.data.status == 'open' || detail.data.status == 'dstop'" @click="upstateStatus('close')">关闭</div>
              <div class="tnr_button but3" v-if="detail.data.status == 'close' || detail.data.status == 'dstop'" @click="upstateStatus('open')">开启</div>
            </div>
          </div>
          <div class="top_label">
            <div class="labels">
              <label>产品名称：{{detail.data.product}}</label>
              <label>负责人 ：{{detail.creatorName}}</label>
            </div>
            <div class="labels">
              <label>指标：{{detail.data.target}}</label>
              <label>所属部门：{{detail.department}}</label>
            </div>
            <div class="labels">
              <label>问题来源：{{detail.data.source}}</label>
              <label>开始时间：{{timestampToTime(detail.createTime)}}</label>
            </div>
            <div class="labels">
              <label>问题分类：{{detail.data.category}}</label>
              <label v-if="detail.status == 'close'">关闭时间：{{timestampToTime(detail.updateTime)}}</label>
            </div>
          </div>
        </div>
        <div class="bottom">
          <!-- 问题描述 -->
          <div class="bot_con" v-if="descHtml == ''">
            <span class="bc_title">问题描述</span>
            <div class="bc_noCon" @click="openRichText('添加问题描述',1)"><i class="el-icon-plus"></i>问题描述</div>
          </div>
          <div class="bot_con" v-else>
            <span class="bc_title">问题描述<span @click="openRichText('修改问题描述',1,descHtml)">点击修改</span></span>
            <div class="getHtml" v-html="descHtml"></div>
          </div>
          <!-- 问题分析 -->
          <div class="bot_con" v-if="analyzeHtml == ''">
            <span class="bc_title">问题分析</span>
            <div class="bc_noCon" @click="openRichText('添加问题分析',2)"><i class="el-icon-plus"></i>问题分析</div>
          </div>
          <div class="bot_con" v-else>
            <span class="bc_title">问题分析<span class="quesLevel" :style="{background:color}">问题等级:{{colorTitle}}</span><span @click="openRichText('修改问题描述',2,analyzeHtml)">点击修改</span></span>
            <div class="getHtml" v-html="analyzeHtml"></div>
          </div>
          <!-- 行动计划 -->
          <div class="bot_con" v-if="chooseLevel != 1">
            <div v-if="planHtml == ''">
              <span class="bc_title">行动计划</span>
              <div class="bc_noCon" @click="openRichText('添加行动计划',3)"><i class="el-icon-plus"></i>行动计划</div>
            </div>
            <div class="bot_con" v-else>
              <span class="bc_title">行动计划<span @click="openRichText('修改行动计划',3,planHtml)">点击修改</span></span>
              <div class="getHtml" v-html="planHtml"></div>
            </div>
          </div>
          <!-- 行动结果 -->
          <div v-if="chooseLevel != 1">
            <div class="bot_con" v-if="resultHtml == ''">
              <span class="bc_title">行动结果</span>
              <div class="bc_noCon" @click="openRichText('添加行动结果',4)"><i class="el-icon-plus"></i>行动结果</div>
            </div>
            <div class="bot_con" v-else>
              <span class="bc_title">行动结果<span @click="openRichText('修改行动结果',4,resultHtml)">点击修改</span></span>
              <div class="getHtml" v-html="resultHtml"></div>
            </div>
          </div>
        </div>
        <div class="button"><el-button type="primary" @click="submit">确认</el-button></div>
      </div>
      <!-- 启用8D流程 -->
      <div v-if="detail.data != undefined">
        <div class="enable8D" v-if="detail.data.edReport != undefined && detail.data.edReport != null && detail.data.edReport != ''">
          <div class="ed_top">启用8D流程</div>
          <div class="ed_bottom" @click="to8D(detail.data.edReport)">
            <div class="edb_left">
              <span class="edbl_top">{{detail.data.edReport.title}}</span>
              <span class="edbl_bottom">{{detail.data.edReport.creator}} {{timeChange(detail.data.edReport.createTime)}}</span>
            </div>
            <div class="edb_right">查看详情</div>
          </div>
        </div>
      </div>
      <div class="bc" v-if="showBig" @click="hiddenBc"></div>
      <div class="bigImg" v-if="showBig">
        <el-carousel trigger="click" height="100%">
          <el-carousel-item v-for="(item,ind) in bigImgList" :key="ind">
            <img :src="item" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <richText v-if="showRichText" :richTitle="richTitle" :richInedex="richInedex" :richVal="richVal" :parLevel="chooseLevel" @params="getParams"></richText>
      <plant v-if="showNewEight" :parEight="parEight"></plant>
      <createQuestion v-if="createQuestionOpen" :haveName="detail" @params="getParams2"></createQuestion>
    </div>
</template>

<script>
  import plant from '../important/8D_1'
  import createQuestion from '../../dialog/createQuestion'
  import qs from 'qs'
  import richText from '../../dialog/richText'
  import {mapGetters,mapActions} from 'vuex'
  export default {
    name: "questionContent",
    data() {
      return {
        imgUrl: localStorage.getItem('imgUrl'),
        pro: {}, //父类继承过来的详情
        detail:[], //查询出来的详情
        descHtml:'', //问题描述
        analyzeHtml:'', //问题分析
        planHtml:'', //行动计划
        resultHtml:'', //行动结果
        richTitle:'',
        richInedex:0,
        richVal:'',
        chooseLevel: 0, //选择的等级
        bigImgList:[], //图片放大列表
        showBig:false,
        colorTitle:'',
        color:'#cccccc',
        colorList:[
          {title:'红色',color:'#dc4444',level:'1'},
          {title:'橙色',color:'#ff8c1b',level:'2'},
          {title:'黄色',color:'#ffcd34',level:'3'},
          {title:'蓝色',color:'#3384dd',level:'4'}
        ],
        parEight:{},
      }
    },
    components:{
      richText,
      plant,
      createQuestion
    },
    computed:{
      ...mapGetters([
        'showRichText',
        'showNewEight',
        'createQuestionOpen',
      ])
    },
    created() {
      let self  = this
      self.pro = self.$route.query
      self.getDetail()
    },
    mounted(){
      let self = this
      setTimeout(() => {
        self.watchImgs()
      },500)
    },
    methods: {
      ...mapActions([
        'upstate'
      ]),
      //监听图片的方法
      watchImgs(){
        let self = this
        let imgList = document.getElementsByClassName('imgs')
        for (let i = 0; i < imgList.length; i++){
          document.getElementsByClassName('imgs')[i].onclick = function () {
            let par = document.getElementsByClassName('imgs')[i].parentNode.parentNode
            let newArr = []
            for (let n = 0; n < par.childNodes.length ;n++){
              if (par.childNodes[n].firstChild.tagName == 'IMG'){
                self.bigImgList.push(par.childNodes[n].firstChild.getAttribute('src'))
              }
            }
            self.showBig = true
          }
        }
      },
      //获取详情
      getDetail(){
        let self = this
        self.$http.get(self.conURL + 'mongo/api/docs/' + self.pro.id).then(res => {
          self.descHtml = ''
          self.analyzeHtml = ''
          self.planHtml = ''
          self.resultHtml = ''
          self.detail = res.data
          self.chooseLevel = self.detail.data.level
          for (let i = 0; i < self.colorList.length; i++){
            if (self.chooseLevel == self.colorList[i].level){
              self.colorTitle = self.colorList[i].title
              self.color = self.colorList[i].color
            }
          }
          self.decompile()
        })
      },
      //返回
      goBack(){
        window.history.go(-1);
      },
      //时间戳转换成时间
      timestampToTime(timestamp) {
        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
        return Y + M + D;
      },
      //单富文本框显示
      openRichText(name,index,val){
        let self = this
        self.richTitle = name
        self.richInedex = index
        self.richVal = val
        self.upstate({key:'showRichText',val:true})
      },
      //json反编译为html代码
      decompile(){
        let self = this
        //问题描述反编译
        if (self.detail.data.desc != '' && self.detail.data.desc != undefined){
          let descH = self.detail.data.desc.replace(/img/g, "img class='imgs'")
          self.descHtml += '<div style="font-size: 16px;color: #666666;margin-bottom: 20px;">' + descH + '</div>'
          if (self.detail.data.descPics != null && self.detail.data.descPics != undefined){
            if (self.detail.data.descPics.length > 0){
              for (let i = 0; i < self.detail.data.descPics.length; i++){
                self.descHtml += "<img src='" + self.conImgURL + self.detail.data.descPics[i] + "'/>"
              }
            }
          }
        }
        //问题分析反编译
        if (self.detail.data.analyze != '' && self.detail.data.analyze != undefined){
          let anaH = self.detail.data.analyze.replace(/img/g, "img class='imgs'")
          self.analyzeHtml += '<div style="font-size: 16px;color: #666666;margin-bottom: 20px;">' + anaH + '</div>'
          if (self.detail.data.analyzePics != null && self.detail.data.analyzePics != undefined){
            if (self.detail.data.analyzePics.length > 0){
              for (let i = 0; i < self.detail.data.analyzePics.length; i++){
                self.descHtml += "<img src='" + self.conImgURL + self.detail.data.analyzePics[i] + "'/>"
              }
            }
          }
        }
        //行动计划反编译
        if (self.detail.data.plan != '' && self.detail.data.plan != undefined){
          let planH = self.detail.data.plan.replace(/img/g, "img class='imgs'")
          self.planHtml += '<div style="font-size: 16px;color: #666666;margin-bottom: 20px;">' + planH + '</div>'
          if (self.detail.data.planPics != null && self.detail.data.planPics != undefined){
            if (self.detail.data.planPics.length > 0){
              for (let i = 0; i < self.detail.data.planPics.length; i++){
                self.descHtml += "<img src='" + self.conImgURL + self.detail.data.planPics[i] + "'/>"
              }
            }
          }
        }
        //行动结果反编译
        if (self.detail.data.result != '' && self.detail.data.result != undefined){
          let resultH = self.detail.data.result.replace(/img/g, "img class='imgs'")
          self.resultHtml += '<div style="font-size: 16px;color: #666666;margin-bottom: 20px;">' + resultH + '</div>'
          if (self.detail.data.resultPics != null && self.detail.data.resultPics != undefined){
            if (self.detail.data.resultPics.length > 0){
              for (let i = 0; i < self.detail.data.resultPics.length; i++){
                self.descHtml += "<img src='" + self.conImgURL + self.detail.data.resultPics[i] + "'/>"
              }
            }
          }
        }
      },
      //组件返回值
      getParams(params){
        let self = this
        let index = params.richInedex
        let content = params.content
        if (params.level != undefined){
          self.chooseLevel = params.level
          for (let i = 0; i < self.colorList.length; i++){
            if (self.chooseLevel == self.colorList[i].level){
              self.colorTitle = self.colorList[i].title
              self.color = self.colorList[i].color
            }
          }
        }
        let resultH = content.replace(/img/g, "img class='imgs'")
        switch (index) {
          case 1:
            self.descHtml = resultH
            break
          case 2:
            self.analyzeHtml = resultH
            break
          case 3:
            self.planHtml = resultH
            break
          case 4:
            self.resultHtml = resultH
            break
        }
        setTimeout(() => {
          self.watchImgs()
        },50)
      },
      //确认提交
      submit(){
        let self = this
        let params={
          id: self.detail.id,
          creator: localStorage.getItem('userName'),
          type: "proposal",
          status:"open",
          data: {
            product:self.detail.data.product, //产品
            level: String(self.chooseLevel),
            desc: self.descHtml,
            analyze: self.analyzeHtml,
            plan: self.planHtml,
            result: self.resultHtml,
            target:self.detail.data.target, //指标
            category:self.detail.data.category,//分类
            source:self.detail.data.source//来源
          }
        }
          self.$http.post(self.conURL + 'mongo/api/docs/update',params).then(res => {
            if (self.chooseLevel != 1){
              this.$router.push('/index/allQuestion')
            } else {
              self.parEight = {
                level: self.chooseLevel,
                target:self.detail.data.target, //指标
                category:self.detail.data.category,//分类
                proposalId: self.detail.id,
              }
              self.upstate({key:'showNewEight',val:true})
            }
          })
      },
      //隐藏大图
      hiddenBc(){
        let self = this
        self.showBig = false
        self.bigImgList = []
      },
      //开启、暂停、关闭
      upstateStatus(status){
        let self = this
        let params={
          id: self.detail.id,
          status:status,
        }
        self.$http.get(self.conURL + 'mongo/api/docs/proposal/status/update?' + qs.stringify(params)).then(res => {
          self.getDetail()
        })
      },
      //修改标题
      updateName(){
        let self = this
        self.upstate({key:'createQuestionOpen',val:true})
      },
      //修改标题返回值
      getParams2(par){
        let self = this
        self.detail.data.title = par.data.title
        self.detail.data.category = par.data.category
        self.detail.data.product = par.data.product
        self.detail.data.source = par.data.source
        self.detail.data.target = par.data.target
      },
      //时间戳处理
      timeChange(p){
        var time = new Date();
        time.setTime(p * 1000);
        var year = time.getFullYear();
        var month = (time.getMonth() + 1) < 10 ?  '0' + (time.getMonth() + 1) : time.getMonth() + 1;
        var date = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
        var hour = time.getHours() < 10 ? '0' + time.getHours() : time.getHours();
        var minute = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
        var second = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds();
        return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second
      },
      //前往8D
      to8D(obj){
        let self = this
        let par = {
          edReport: obj
        }
        this.$router.push({
          path:'/index/public_eightD',
          query:par
        })
      }
    }
  }
</script>

<style lang="less">
  .questionContent{
    display: flex;
    flex-direction: column;
    padding: 0 62px;
    padding-bottom: 62px;
    box-sizing: border-box;
    header{
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 62px;
      line-height: 62px;
      font-size: 14px;
      color: #666666;
      padding-left: 9px;
      box-sizing: border-box;
      span:last-child{
        color: #3384dd;
      }
    }
    .qc_content{
      display: flex;
      flex-direction: column;
      border: 1px solid #e5e5e5;
      border-radius: 5px;
      background: #fff;
      width: 100%;
      .top{
        width: 100%;
        height: 188px;
        display: flex;
        flex-direction: column;
        background: #f9f9f9;
        border-bottom: 1px solid #e5e5e5;
        padding: 0 28px;
        box-sizing: border-box;
        .top_title{
          width: 100%;
          height: 74px;
          line-height: 74px;
          color: #222222;
          font-size: 18px;
          display: flex;
          flex-direction: row;
          cursor: pointer;
          i{
            margin: auto 0;
          }
        }
        .top_name{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          width: 100%;
          height: 30px;
          line-height: 30px;
          .tn_left{
            display: flex;
            flex-direction: row;
            .name{
              font-size: 20px;
              color: #333333;
              margin-right: 20px;
            }
            .update{
              font-size: 16px;
              color: #3384dd;
              cursor: pointer;
            }
          }
          .tn_right{
            display: flex;
            flex-direction: row;
            .status{
              font-size: 18px;
              color: #3384dd;
              margin-right: 26px;
            }
            .tnr_button{
              width: 48px;
              height: 28px;
              text-align: center;
              font-size: 16px;
              cursor: pointer;
            }
            .but1{
              border: 1px solid #3384dd;
              color: #3384dd;
            }
            .but2{
              border: 1px solid #dc4444;
              color: #dc4444;
              margin-left: 10px;
            }
            .but3{
              border: 1px solid #3384dd;
              color: #3384dd;
              margin-left: 10px;
            }
          }
        }
        .top_label{
          display: flex;
          flex-direction: row;
          .labels{
            display: flex;
            flex-direction: column;
            font-size: 14px;
            color: #888888;
            margin-right: 50px;
            label{
              margin-top: 12px;
            }
          }
          .labels:last-child{
            margin-right: 0;
          }
        }
      }
      .bottom{
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0 28px;
        box-sizing: border-box;
        .bot_con{
          display: flex;
          flex-direction: column;
          padding-top: 30px;
          border-bottom: 1px dashed #e5e5e5;
          .bc_title{
            font-size: 18px;
            line-height: 18px;
            color: #333333;
            text-align: left;
            margin-bottom: 17px;
            .quesLevel{
              font-size: 14px;
              color: #fff;
              padding: 3px 5px;
              border-radius: 3px;
              cursor: auto;
            }
            span{
              font-size: 16px;
              color: #3384dd;
              line-height: 18px;
              margin-left: 20px;
              cursor: pointer;
            }
          }
          .bc_noCon{
            width: 100%;
            height: 62px;
            line-height: 64px;
            text-align: center;
            border: 1px dashed #e5e5e5;
            background: #f9f9f9;
            font-size: 18px;
            color: #2d7ede;
            margin-bottom: 30px;
            cursor: pointer;
            i{
              margin-right: 10px;
            }
          }
          .getHtml{
            p{
              margin: 0;
            }
            .imgs{
              cursor: pointer;
            }
            .ql-align-center{
              text-align: center;
            }
            .ql-align-right{
              text-align: right;
            }
            /*.Damon:active{*/
              /*position: fixed;*/
              /*margin: auto;*/
              /*left: 0;*/
              /*right: 0;*/
              /*top: 0;*/
              /*bottom: 0;*/
              /*width: 30%;*/
              /*height: 30%;*/
            /*}*/
          }
        }
        .bot_con:last-child{
          border-bottom: none;
        }
      }
      .button{
        padding: 30px 28px;
        padding-top: 0;
        box-sizing: border-box;
      }
    }
    .enable8D{
      margin-top: 20px;
      width: 100%;
      background: #ffffff;
      border: 1px solid #e5e5e5;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      .ed_top{
        height: 59px;
        line-height: 59px;
        padding: 0 30px;
        box-sizing: border-box;
        font-size: 18px;
        color: #222222;
        border-bottom: 1px solid #e5e5e5;
      }
      .ed_bottom{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0 30px;
        cursor: pointer;
        .edb_left{
          display: flex;
          flex-direction: column;
          padding-top: 22px;
          padding-bottom: 22px;
          .edbl_top{
            font-size: 18px;
            color: #333333;
          }
          .edbl_bottom{
            font-size: 16px;
            color: #666666;
          }
        }
        .edb_right{
          width: 85px;
          height: 26px;
          line-height: 28px;
          text-align: center;
          border: 1px solid #dddddd;
          border-radius: 3px;
          font-size: 18px;
          color: #999999;
          margin-top: auto;
          margin-bottom: auto;
        }
      }
    }
    .bc{
      display: block;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: #000;
      opacity: .3;
      z-index: 11;
    }
    .bigImg{
      z-index: 12;
      margin: auto;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 30%;
      height: 40%;
      img{
        margin: auto;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
    }
  }
</style>
